<template>
  <div>
    <div class="container">
      <Breadcrumb :items="['menu.order', mainType==1?'order.tabs.pane.agent':'order.tabs.pane.area']" />
      <a-divider style="margin-top: 0" />
        <a-tabs  v-model="mainType"  style="background-color: #ffffff;padding:5px 0;border-radius: 5px;" @change="tabsChange">
          <a-tab-pane :key="1" :title="$t('order.tabs.pane.agent')">
            <OrderList :type="1" />
          </a-tab-pane>
          <a-tab-pane :key="2" :title="$t('order.tabs.pane.area')">
            <OrderList :type="2"/>
          </a-tab-pane>
        </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import OrderList from './components/order-list.vue';

  const mainType = ref<any>(1);

  // 选项卡切换
  const tabsChange = (key: string) => {
    mainType.value = key;
  };
</script>

<style lang="less" scoped>
  .container {
    padding: 0 20px 20px 20px;
    
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }

  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }

  .setting {
    display: flex;
    align-items: center;
    width: 200px;

    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>
